<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - Angular documentation style guidelink</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="code-code-tabs-module-es2015.505e1e0a869946918011.js"></script><script charset="utf-8" src="live-example-live-example-module-es2015.a8023d1b084857ef476b.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script><style>.mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:16px;border-radius:4px}._mat-animation-noopable.mat-card{transition:none;animation:none}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}.cdk-high-contrast-active .mat-card{outline:solid 1px}.mat-card-actions,.mat-card-content,.mat-card-subtitle{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button,.mat-card-actions .mat-stroked-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px}@media(max-width:599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.mat-card-content>:first-child,.mat-card>:first-child{margin-top:0}.mat-card-content>:last-child:not(.mat-card-footer),.mat-card>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child,.mat-card-actions .mat-stroked-button:first-child{margin-left:0;margin-right:0}.mat-card-subtitle:not(:first-child),.mat-card-title:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}</style><style>.mat-tab-group{display:flex;flex-direction:column}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-label:focus{outline:dotted 2px}.mat-tab-label.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-label.mat-tab-disabled{opacity:.5}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-label{opacity:1}@media(max-width:599px){.mat-tab-label{padding:0 12px}}@media(max-width:959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height .5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-tab-body-wrapper{transition:none;animation:none}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}</style><style>.mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-header-pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:none}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-pagination-after,.mat-tab-header-rtl .mat-tab-header-pagination-before{padding-right:4px}.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:"";height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable.mat-ink-bar{transition:none;animation:none}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}.cdk-high-contrast-active .mat-ink-bar{outline:solid 2px;height:0}.mat-tab-labels{display:flex}[mat-align-tabs=center] .mat-tab-labels{justify-content:center}[mat-align-tabs=end] .mat-tab-labels{justify-content:flex-end}.mat-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}._mat-animation-noopable.mat-tab-list{transition:none;animation:none}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}.cdk-high-contrast-active .mat-tab-label:focus{outline:dotted 2px}.mat-tab-label.mat-tab-disabled{cursor:default}.cdk-high-contrast-active .mat-tab-label.mat-tab-disabled{opacity:.5}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}.cdk-high-contrast-active .mat-tab-label{opacity:1}@media(max-width:599px){.mat-tab-label{min-width:72px}}</style><style>.mat-tab-body-content{height:100%;overflow:auto}.mat-tab-group-dynamic-height .mat-tab-body-content{overflow:hidden}</style><style>iframe[_ngcontent-ng-docs-c59]{min-height:400px}</style></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-docs-style-guide sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self"><span>服务提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self"><span>DI 提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:192px"><main role="main" class="sidenav-content" id="guide-docs-style-guide"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/docs-style-guide.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="angular-documentation-style-guide">Angular documentation style guide<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#angular-documentation-style-guide"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="Scope of these guidelines"><a href="guide/docs-style-guide#scope-of-these-guidelines">Scope of these guidelines</a></li><li class="h2 ng-star-inserted" title="Doc generation and tooling"><a href="guide/docs-style-guide#doc-generation-and-tooling">Doc generation and tooling</a></li><li class="h2 ng-star-inserted" title="Guide pages"><a href="guide/docs-style-guide#guide-pages">Guide pages</a></li><li class="h2 secondary ng-star-inserted" title="Markdown and HTML"><a href="guide/docs-style-guide#markdown-and-html">Markdown and HTML</a></li><li class="h2 secondary ng-star-inserted" title="Title"><a href="guide/docs-style-guide#title">Title</a></li><li class="h2 secondary ng-star-inserted" title="Sections"><a href="guide/docs-style-guide#sections">Sections</a></li><li class="h2 secondary ng-star-inserted" title="Table of contents"><a href="guide/docs-style-guide#table-of-contents">Table of contents</a></li><li class="h2 secondary ng-star-inserted" title="Navigation"><a href="guide/docs-style-guide#navigation">Navigation</a></li><li class="h2 secondary ng-star-inserted" title="Code snippets"><a href="guide/docs-style-guide#code-snippets">Code snippets</a></li><li class="h3 secondary ng-star-inserted" title="Code example"><a href="guide/docs-style-guide#code-example">Code example</a></li><li class="h3 secondary ng-star-inserted" title="Code Tabs"><a href="guide/docs-style-guide#code-tabs">Code Tabs</a></li><li class="h2 secondary ng-star-inserted" title="Source code markup"><a href="guide/docs-style-guide#source-code-markup">Source code markup</a></li><li class="h2 secondary ng-star-inserted" title="Live examples"><a href="guide/docs-style-guide#live-examples">Live examples</a></li><li class="h2 secondary ng-star-inserted" title="Anchors"><a href="guide/docs-style-guide#anchors">Anchors</a></li><li class="h2 secondary ng-star-inserted" title="Alerts and Calllouts"><a href="guide/docs-style-guide#alerts-and-calllouts">Alerts and Calllouts</a></li><li class="h3 secondary ng-star-inserted" title="Alerts"><a href="guide/docs-style-guide#alerts">Alerts</a></li><li class="h3 secondary ng-star-inserted" title="Callouts"><a href="guide/docs-style-guide#callouts">Callouts</a></li><li class="h2 secondary ng-star-inserted" title="Trees"><a href="guide/docs-style-guide#trees">Trees</a></li><li class="h2 secondary ng-star-inserted" title="Tables"><a href="guide/docs-style-guide#tables">Tables</a></li><li class="h2 secondary ng-star-inserted" title="Images"><a href="guide/docs-style-guide#images">Images</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><p>This style guide is for anyone who contributes to the Angular documentation (this site). These guidelines should be followed by all authors. Deviations must be approved by a documentation editor.</p><p>The guidelines described here serve two purposes:</p><ul><li><p>To ensure a high-quality, consistent experience for Angular documentation users.</p></li><li><p>To simplify the writing process for contributing authors. This guide helps you make decisions about tone, voice, and style. It also helps you find the right markup quickly.</p></li></ul><div class="alert is-helpful"><p>This guide is a <em>living document</em>; it changes over time. We strive for consistency to the extent feasible, but you may find parts of our documentation that don't match this style guide. When in doubt, <strong>follow this guide rather than imitating existing documents.</strong></p></div><h2 id="scope-of-these-guidelines">Scope of these guidelines<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#scope-of-these-guidelines"><i class="material-icons">link</i></a></h2><p>We ask all contributing authors to adhere to three aspects of style:</p><ul><li><strong>Writing style:</strong> Word usage, grammar, capitalization, and punctuation. Adherence to Angular's writing guidelines ensures a consistent "voice", helps ensure accuracy of the information, and facilitates use world-wide, by audiences with different backgrounds.</li></ul><ul><li><strong>Markup style:</strong> How to include images, tables, alert boxes, and code snippets. Angular docs are written in Markdown, with custom extensions for this site. Correct markup ensures a consistent look-and-feel, and is essential for the doc to build and function correctly.</li></ul><ul><li><strong>Angular coding style:</strong> Coding style for example apps and code snippets. Code examples are encouraged for demonstrating how to apply the concepts and features discussed. Angular has a custom framework that enables authors to include code snippets directly from example apps that are automatically tested as part of doc builds. To contribute example code, you must understand Angular itself and the custom framework for Angular doc examples.</li></ul><p>For each aspect of style, the following table explains where to find the primary guidelines and what this Angular Documentation Style Guide offers.</p><table><thead><tr><th>Style</th><th>Guidelines</th></tr></thead><tbody><tr><td><strong>Writing style</strong></td><td>Primary: <a href="https://developers.google.com/style/">Google Developer Documentation Style Guide</a><br>This guide: Specifies any special considerations for Angular docs.</td></tr><tr><td><strong>Markup style</strong></td><td>Primary: This guide<br>This guide: Specifies guidelines for markup of guides and tutorials, which are written primarily in Markdown.</td></tr><tr><td><strong>Angular coding style</strong></td><td>Primary: <a href="guide/styleguide" title="Angular Application Code Style Guide">Angular Style Guide</a>.<br>This guide: How to create, store, and include code examples in guides and tutorials.</td></tr></tbody></table><div class="alert is-helpful"><p>Note: Angular API and CLI reference docs are generated from source code and/or related source files, which may have other markup styles and other ways of including code examples.</p></div><h2 id="doc-generation-and-tooling">Doc generation and tooling<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#doc-generation-and-tooling"><i class="material-icons">link</i></a></h2><p>To make changes to the documentation pages and sample code, clone the <a href="https://github.com/angular/angular" title="Angular repo">Angular github repository</a> and go to the <code>aio/</code> folder.</p><p>The <a href="https://github.com/angular/angular/blob/master/aio/README.md" title="AIO ReadMe">aio/README.md</a> explains how to install and use the tools to edit and test your changes.</p><p>Here are a few essential commands for guide page authors.</p><ol><li><p><code>yarn setup</code> — installs packages; builds docs, stackblitz, and zips.</p></li><li><p><code>yarn docs-watch --watch-only</code> — watches for saved content changes and refreshes the browser. The (optional) <code>--watch-only</code> flag skips the initial docs rebuild.</p></li><li><p><code>yarn start</code> — starts the doc viewer application so you can see your local changes in the browser.</p></li><li><p><a href="http://localhost:4200/">http://localhost:4200/</a> — browse to the app running locally.</p></li></ol><p>You can combine <code>yarn docs-watch</code> and <code>yarn start</code> into one command with <code>yarn serve-and-sync</code>.</p><h2 id="guide-pages">Guide pages<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#guide-pages"><i class="material-icons">link</i></a></h2><p>All but a few guide pages are <a href="https://daringfireball.net/projects/markdown/syntax" title="markdown">markdown</a> files with an <code>.md</code> extension.</p><p>Every guide page file is stored in the <code>content/guide</code> directory. Although the <a href="guide/docs-style-guide#navigation">side navigation</a> panel displays as a hierarchy, the directory is flat with no sub-folders. The flat folder approach allows us to shuffle the apparent navigation structure without moving page files or redirecting old page URLs.</p><p>The doc generation process consumes the markdown files in the <code>content/guide</code> directory and produces JSON files in the <code>src/generated/docs/guide</code> directory, which is also flat. Those JSON files contain a combination of document metadata and HTML content.</p><p>The reader requests a page by its Page URL. The doc viewer fetches the corresponding JSON file, interprets it, and renders it as fully-formed HTML page.</p><p>Page URLs mirror the <code>content</code> file structure. The URL for the page of a guide is in the form <code>guide/{page-name}</code>. The page for <em>this</em> "Authors Style Guide" is located at <code>content/guide/docs-style-guide.md</code> and its URL is <code>guide/docs-style-guide</code>.</p><div class="alert is-helpful"><p><em>Tutorial</em> pages are exactly like guide pages. The only difference is that they reside in <code>content/tutorial</code> instead of <code>content/guide</code> and have URLs like <code>tutorial/{page-name}</code>.</p><p><em>API</em> pages are generated from Angular source code into the <code>src/generated/docs/api</code> directory. The doc viewer translates URLs that begin <code>api/</code> into requests for document JSON files in that directory. This style guide does not discuss creation or maintenance of API pages.</p><p><em>Marketing</em> pages are similar to guide pages. They're located in the <code>content/marketing</code> directory. While they can be markdown files, they may be static HTML pages or dynamic HTML pages that render with JSON data.</p><p>Only a few people are authorized to write marketing pages. This style guide does not discuss creation or maintenance of marketing pages.</p></div><h2 id="markdown-and-html">Markdown and HTML<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#markdown-and-html"><i class="material-icons">link</i></a></h2><p>While documentation guide pages ultimately render as HTML, almost all of them are written in <a href="https://daringfireball.net/projects/markdown/syntax" title="markdown">markdown</a>.</p><p>Markdown is easier to read and to edit than HTML. Many editors (including Visual Studio Code) can render markdown as you type it.</p><p>From time to time you'll have to step away from markdown and write a portion of the document in HTML. Markdown allows you to mix HTML and markdown in the same document.</p><p>Standard markdown processors don't allow you to put markdown <em>within</em> HTML tags. But the Angular documentation markdown processor <strong>supports markdown within HTML</strong>, as long as you follow one rule:</p><div class="alert is-critical"><p><strong>Always</strong> follow every opening and closing HTML tag with <em>a blank line</em>.</p></div><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="alert is-critical"&gt; **Always** follow every opening and closing <a href="api/core/SecurityContext#HTML" class="code-anchor">HTML</a> tag with _a blank line_. &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-critical"</span><span class="tag">&gt;</span><span class="pln">

  **Always** follow every opening and closing </span><a href="api/core/SecurityContext#HTML" class="code-anchor"><span class="pln">HTML</span></a><span class="pln"> tag with _a blank line_.

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p>It is customary but not required to <em>precede</em> the <em>closing HTML</em> tag with a blank line as well.</p></div><h2 id="title">Title<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#title"><i class="material-icons">link</i></a></h2><p>Every guide document must have a title.</p><p>The title should appear at the top of the physical page. Begin the title with the markdown <code>#</code> character. Alternatively, you can write the equivalent <code>&lt;h1&gt;</code>.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none"># Angular documentation <a href="api/animations/style" class="code-anchor">style</a> guide</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln"># Angular documentation </span><a href="api/animations/style" class="code-anchor"><span class="pln">style</span></a><span class="pln"> guide</span></code>
    </pre></aio-code></code-example><p><strong>Only one title (<code>&lt;h1&gt;</code>) per document!</strong></p><p>Title text should be in "Sentence case", which means the first word is capitalized and all other words are lower case (unless they are technical terms that are always capitalized, like "Angular").</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none"># Deprecation policy in Angular</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln"># Deprecation policy in Angular</span></code>
    </pre></aio-code></code-example><p><strong>Always follow the title with at least one blank line.</strong></p><p>Note that the corresponding left-nav TOC text should be in "title case", which means that you use capital letters to start the first words and all principal words. Use lower case letters for secondary words such as "in", "of", and "the". The TOC title can also be shortened to fit in the column.</p><h2 id="sections">Sections<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#sections"><i class="material-icons">link</i></a></h2><p>A typical document is divided into sections.</p><p>All heading text should be in "Sentence case", which means the first word is capitalized and all other words are lower case.</p><p><strong>Always follow the section heading with at least one blank line.</strong></p><h2 class="no-toc" id="main-section-heading">Main section heading <a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#main-section-heading"><i class="material-icons">link</i></a></h2>There are usually one or more main sections that may be further divided into secondary sections.<p>Begin a main section heading with the markdown <code>##</code> characters. Alternatively, you can write the equivalent <code>&lt;h2&gt;</code> HTML tag.</p><p>The main section heading should be followed by a blank line and then the content for that heading.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">## Sections A typical <a href="api/platform-server/PlatformConfig#document" class="code-anchor">document</a> is divided into sections.</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">## Sections

A typical </span><a href="api/platform-server/PlatformConfig#document" class="code-anchor"><span class="pln">document</span></a><span class="pln"> is divided into sections.</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="secondary-section-heading">Secondary section heading <a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#secondary-section-heading"><i class="material-icons">link</i></a></h3><p>A secondary section heading is related to a main heading and <em>falls textually within</em> the bounds of that main heading.</p><p>Begin a secondary heading with the markdown <code>###</code> characters. Alternatively, you can write the equivalent <code>&lt;h3&gt;</code> HTML tag.</p><p>The secondary heading should be followed by a blank line and then the content for that heading.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">### Secondary section heading A secondary section ...</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">### Secondary section heading

A secondary section ...</span></code>
    </pre></aio-code></code-example><h4 id="additional-section-headings">Additional section headings<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#additional-section-headings"><i class="material-icons">link</i></a></h4><p>Try to minimize the heading depth, preferably only two. But more headings, such as this one, are permitted if they make sense.</p><p><strong>N.B.</strong>: The <a href="guide/docs-style-guide#table-of-contents">Table-of-contents</a> generator only considers main (<code>&lt;h2&gt;</code>) and secondary (<code>&lt;h3&gt;</code>) headings.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">#### Additional section headings Try to minimize ...</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">#### Additional section headings

Try to minimize ...</span></code>
    </pre></aio-code></code-example><h2 id="table-of-contents">Table of contents<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#table-of-contents"><i class="material-icons">link</i></a></h2><p>Most pages display a table of contents (TOC). The TOC appears in the right panel when the viewport is wide. When narrow, the TOC appears in an expandable/collapsible region near the top of the page.</p><p>You should not create your own TOC by hand. The TOC is generated automatically from the page's main and secondary section headers.</p><p>To exclude a heading from the TOC, create the heading as an <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code> element with a class called 'no-toc'. You can't do this with markdown.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3 class="no-toc"&gt; This heading is not displayed in the TOC &lt;/h3&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"no-toc"</span><span class="tag">&gt;</span><span class="pln">
This heading is not displayed in the TOC
</span><span class="tag">&lt;/h3&gt;</span></code>
    </pre></aio-code></code-example><p>You can turn off TOC generation for the <em>entire</em> page by writing the title with an <code>&lt;h1&gt;</code> tag and the <code>no-toc</code> class.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h1 class="no-toc"&gt; A guide without a TOC &lt;/h1&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"no-toc"</span><span class="tag">&gt;</span><span class="pln">
A guide without a TOC
</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><h2 id="navigation">Navigation<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#navigation"><i class="material-icons">link</i></a></h2><p>The navigation links at the top, left, and bottom of the screen are generated from the JSON configuration file, <code>content/navigation.json</code>.</p><p>The authority to change the <code>navigation.json</code> file is limited to a few core team members. But for a new guide page, you should suggest a navigation title and position in the left-side navigation panel called the "side nav".</p><p>Look for the <code>SideNav</code> node in <code>navigation.json</code>. The <code>SideNav</code> node is an array of navigation nodes. Each node is either an <em>item</em> node for a single document or a <em>header</em> node with child nodes.</p><p>Find the header for your page. For example, a guide page that describes an Angular feature is probably a child of the <code>Fundamentals</code> header.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">{ "title": "Fundamentals", "tooltip": "The fundamentals of Angular", "children": [ ... ] }</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">{
  "title": "Fundamentals",
  "tooltip": "The fundamentals of Angular",
  "children": [ ... ]
}</span></code>
    </pre></aio-code></code-example><p>A <em>header</em> node child can be an <em>item</em> node or another <em>header</em> node. If your guide page belongs under a sub-header, find that sub-header in the JSON.</p><p>Add an <em>item</em> node for your guide page as a child of the appropriate <em>header</em> node. It probably looks something like this one.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">{ "url": "guide/architecture", "title": "Architecture", "tooltip": "The basic building blocks of Angular applications." }</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">{
  "url": "guide/architecture",
  "title": "Architecture",
  "tooltip": "The basic building blocks of Angular applications."
}</span></code>
    </pre></aio-code></code-example><p>A navigation node has the following properties:</p><ul><li><p><code>url</code>- the URL of the guide page (<em>item node only</em>).</p></li><li><p><code>title</code>- the text displayed in the side nav.</p></li><li><p><code>tooltip</code> - text that appears when the reader hovers over the navigation link.</p></li><li><p><code>children</code> - an array of child nodes (<em>header node only</em>).</p></li><li><p><code>hidden</code> - defined and set true if this is a guide page that should <em>not</em> be displayed in the navigation panel. Rarely needed, it is a way to hide the page from navigation while making it available to readers who should know about it. <em>This</em> "Authors Style Guide" is a hidden page.</p></li></ul><div class="alert is-critical"><p>Do not create a node that is both a <em>header</em> and an <em>item</em> node. That is, do not specify the <code>url</code> property of a <em>header</em> node.</p></div><div class="alert is-critical"><p>The current guidelines allow for a three-level navigation structure with two header levels. Don't add a third header level.</p></div><h2 id="code-snippets">Code snippets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-snippets"><i class="material-icons">link</i></a></h2><p>Guides are rich in examples of working Angular code. Example code can be commands entered in a terminal window, a fragment of TypeScript or HTML, or an entire code file.</p><p>Whatever the source, the doc viewer renders them as "code snippets", either individually with the <a href="guide/docs-style-guide#code-example" title="code-example"><em>code-example</em></a> component or as a tabbed collection with the <a href="guide/docs-style-guide#code-tabs" title="code-tabs"><em>code-tabs</em></a> component.</p><a id="code-example"></a><h3 id="code-example">Code example<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-example"><i class="material-icons">link</i></a></h3><p>You can display a simple, inline code snippet with the markdown backtick syntax. Use a single backtick on either side of a term when referring to code or the name of a file in a sentence. The following are some examples:</p><ul><li>In the <code>app.component.ts</code>, add a <code>logger()</code> method.</li><li>The <code>name</code> property is <code>Sally</code>.</li><li>Add the component class name to the <code>declarations</code> array.</li></ul><p>The markdown is as follows:</p><code-example language="markdown" ng-version="9.0.0-rc.11"><div style="display:none">* In the `app.component.ts`, add a `logger()` method. * The &lt;code class="no-auto-link"&gt;item&lt;/code&gt; property is `true`. * Add the component class name to the `declarations` array.</div><aio-code><pre class="lang-markdown prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">*</span><span class="pln"> </span><span class="typ">In</span><span class="pln"> the </span><span class="str">`app.component.ts`</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">add</span><span class="pln"> a </span><span class="str">`logger()`</span><span class="pln"> method</span><span class="pun">.</span><span class="pln">
</span><span class="pun">*</span><span class="pln"> </span><span class="typ">The</span><span class="pln"> </span><span class="pun">&lt;</span><span class="pln">code </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"no-auto-link"</span><span class="pun">&gt;</span><span class="pln">item</span><span class="pun">&lt;/</span><span class="pln">code</span><span class="pun">&gt;</span><span class="pln"> </span><span class="kwd">property</span><span class="pln"> </span><span class="kwd">is</span><span class="pln"> </span><span class="str">`true`</span><span class="pun">.</span><span class="pln">
</span><span class="pun">*</span><span class="pln"> </span><span class="typ">Add</span><span class="pln"> the component </span><span class="kwd">class</span><span class="pln"> name to the </span><span class="str">`declarations`</span><span class="pln"> array</span><span class="pun">.</span></code>
    </pre></aio-code></code-example><p>In certain cases, when you apply backticks around a term, it may auto-link to the API documentation. If you do not intend the term to be a link, use the following syntax:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">The &lt;code class="no-auto-link"&gt;<a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a>&lt;/code&gt; property is `true`.</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">The </span><span class="tag">&lt;code</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"no-auto-link"</span><span class="tag">&gt;</span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="pln">item</span></a><span class="tag">&lt;/code&gt;</span><span class="pln"> property is `true`.</span></code>
    </pre></aio-code></code-example><p>For block code snippets, we generally prefer to display code with the Angular documentation <em>code-example</em> component represented by the <code>&lt;code-example&gt;</code> tag. The <code>&lt;code-example&gt;</code> tag has a <code>header</code> attribute that you use to identify the file that the example comes from. The header should be used whenever possible to establish the context of the example. See <a href="guide/docs-style-guide#code-snippets-and-code-samples">Code snippets and code examples</a> for more details.</p><h3 class="no-toc" id="inline-code-snippets">Inline code-snippets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#inline-code-snippets"><i class="material-icons">link</i></a></h3><p>You should source code snippets <a href="guide/docs-style-guide#from-code-samples">from working sample code</a> when possible. But there are times when an inline snippet is the better choice.</p><p>For terminal input and output, put the content between <code>&lt;code-example&gt;</code> tags, set the CSS class to <code>code-shell</code>, and set the language attribute to <code>sh</code> as in this example.</p><code-example language="sh" class="code-shell" ng-version="9.0.0-rc.11"><div style="display:none">npm start</div><aio-code><pre class="lang-sh prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">npm start</span></code>
    </pre></aio-code></code-example><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-example language="sh" class="code-shell"&gt; npm start &lt;/code-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-example</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"sh"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"code-shell"</span><span class="tag">&gt;</span><span class="pln">
  npm start
</span><span class="tag">&lt;/code-example&gt;</span></code>
    </pre></aio-code></code-example><p>Inline, hand-coded snippets like this one are <em>not</em> testable and, therefore, are intrinsically unreliable. This example belongs to the small set of pre-approved, inline snippets that includes user input in a command shell or the <em>output</em> of some process.</p><p><strong>Do not write inline code snippets</strong> unless you have a good reason and the editor's permission to do so. In all other cases, code snippets should be generated automatically from tested code samples.</p><p>For hypothetical examples such as illustrations of configuration options in a JSON file, you should still use The <code>&lt;code-example&gt;</code> tag with the <code>header</code> attribute to identify the context.</p><a id="from-code-samples"></a><h3 class="no-toc" id="code-snippets-and-code-samples">Code snippets and code samples<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-snippets-and-code-samples"><i class="material-icons">link</i></a></h3><p>One of the documentation design goals is that guide page code snippets should be examples of real, working code.</p><p>We meet this goal by displaying code snippets that are derived directly from standalone code samples, written specifically for these guide pages.</p><p>The author of a guide page is responsible for the code sample that supports that page. The author must also write end-to-end tests for the sample.</p><p>Code samples are located in sub-folders of the <code>content/examples</code> directory of the <code>angular/angular</code> repository. An example folder name should be the same as the guide page it supports.</p><div class="alert is-helpful"><p>A guide page might not have its own sample code. It might refer instead to a sample belonging to another page.</p></div><p>The Angular CI process runs all end-to-end tests for every Angular PR. Angular re-tests the samples after every new version of a sample and every new version of Angular itself.</p><p>When possible, every snippet of code on a guide page should be derived from a code sample file. You tell the Angular documentation engine which code file - or fragment of a code file - to display by configuring <code>&lt;code-example&gt;</code> attributes.</p><h4 id="code-snippet-from-a-file">Code snippet from a file<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-snippet-from-a-file"><i class="material-icons">link</i></a></h4><p><em>This</em> "Authors Doc Style Guide" has its own sample application, located in the <code>content/examples/docs-style-guide</code> folder.</p><p>The following <em>code-example</em> displays the sample's <code>app.module.ts</code>.</p><code-example path="docs-style-guide/src/app/app.module.ts" header="src/app/app.module.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> } from '@angular/forms'; import { AppComponent } from './app.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln">      </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln">   </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/forms'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln">  </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln">      </span><span class="pun">[</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln">    </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p>Here's the brief markup that produced that lengthy snippet:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-example path="docs-style-guide/src/app/app.module.ts" header="src/app/app.module.ts"&gt; &lt;/code-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-example</span><span class="pln">
  </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/src/app/app.module.ts"</span><span class="pln">
  </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"src/app/app.module.ts"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/code-example&gt;</span></code>
    </pre></aio-code></code-example><p>You identified the snippet's source file by setting the <code>path</code> attribute to sample folder's location <em>within</em> <code>content/examples</code>. In this example, that path is <code>docs-style-guide/src/app/app.module.ts</code>.</p><p>You added a header to tell the reader where to find the file by setting the <code>header</code> attribute. Following convention, you set the <code>header</code> attribute to the file's location within the sample's root folder.</p><div class="alert is-helpful"><p>Unless otherwise noted, all code snippets in this page are derived from sample source code located in the <code>content/examples/docs-style-guide</code> directory.</p></div><div class="alert is-important"><p>The doc tooling reports an error if the file identified in the path does not exist <strong>or is <em>git</em>-ignored</strong>.</p><p>Most <code>.js</code> files are <em>git</em>-ignored. If you want to include an ignored code file in your project and display it in a guide you must <em>un-ignore</em> it.</p><p>The preferred way to un-ignore a file is to update the <code>content/examples/.gitignore</code> like this:</p><code-example header="content/examples/.gitignore" ng-version="9.0.0-rc.11"><div style="display:none"># my-guide !my-guide/src/something.js !my-guide/more-javascript*.js</div><header class="ng-star-inserted">content/examples/.gitignore</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from content/examples/.gitignore">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com"># my-guide</span><span class="pln">
</span><span class="pun">!</span><span class="kwd">my</span><span class="pun">-</span><span class="pln">guide</span><span class="pun">/</span><span class="pln">src</span><span class="pun">/</span><span class="pln">something</span><span class="pun">.</span><span class="pln">js
</span><span class="pun">!</span><span class="kwd">my</span><span class="pun">-</span><span class="pln">guide</span><span class="pun">/</span><span class="pln">more</span><span class="pun">-</span><span class="pln">javascript</span><span class="pun">*.</span><span class="pln">js</span></code>
    </pre></aio-code></code-example></div><h4 id="code-example-attributes">Code-example attributes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-example-attributes"><i class="material-icons">link</i></a></h4><p>You control the <em>code-example</em> output by setting one or more of its attributes:</p><ul><li><p><code>path</code>- the path to the file in the <code>content/examples</code> folder.</p></li><li><p><code>header</code>- the header of the code listing.</p></li><li><p><code>region</code>- displays the source file fragment with that region name; regions are identified by <em>docregion</em> markup in the source file, as explained <a href="guide/docs-style-guide#region" title="Displaying a code fragment">below</a>.</p></li><li><p><code>linenums</code>- value may be <code>true</code>, <code>false</code>, or a <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code>. When not specified, line numbers default to <code>false</code> (i.e. no line numbers are displayed). The rarely used <code><a href="api/common/DecimalPipe" class="code-anchor">number</a></code> option starts line numbering at the given value. <code>linenums=4</code> sets the starting line number to 4.</p></li><li><p><code>class</code>- code snippets can be styled with the CSS classes <code>no-box</code>, <code>code-shell</code>, and <code>avoid</code>.</p></li><li><p><code>hideCopy</code>- hides the copy button</p></li><li><p><code>language</code>- the source code language such as <code>javascript</code>, <code>html</code>, <code>css</code>, <code>typescript</code>, <code><a href="api/common/JsonPipe" class="code-anchor">json</a></code>, or <code>sh</code>. This attribute only works for inline examples.</p></li></ul><a id="region"></a><h4 id="displaying-a-code-fragment">Displaying a code fragment<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#displaying-a-code-fragment"><i class="material-icons">link</i></a></h4><p>Often you want to focus on a fragment of code within a sample code file. In this example, you focus on the <code>AppModule</code> class and its <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> metadata.</p><code-example path="docs-style-guide/src/app/app.module.ts" region="class" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/FormsModule" class="code-anchor">FormsModule</a> ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln">      </span><span class="pun">[</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/forms/FormsModule" class="code-anchor"><span class="typ">FormsModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln">    </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p>First you surround that fragment in the source file with a named <em>docregion</em> as described <a href="guide/docs-style-guide#source-code-markup">below</a>. Then you reference that <em>docregion</em> in the <code>region</code> attribute of the <code>&lt;code-example&gt;</code> like this</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-example path="docs-style-guide/src/app/app.module.ts" region="class"&gt; &lt;/code-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-example</span><span class="pln">
  </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/src/app/app.module.ts"</span><span class="pln">
  </span><span class="atn">region</span><span class="pun">=</span><span class="atv">"class"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/code-example&gt;</span></code>
    </pre></aio-code></code-example><p>A couple of observations:</p><ol><li><p>The <code>region</code> value, <code>"class"</code>, is the name of the <code>#docregion</code> in the source file. Confirm that by looking at <code>content/examples/docs-style-guide/src/app/app.module.ts</code></p></li><li><p>Omitting the <code>header</code> is fine when the source of the fragment is obvious. We just said that this is a fragment of the <code>app.module.ts</code> file which was displayed immediately above, in full, with a header. There's no need to repeat the header.</p></li></ol><h4 id="example-of-bad-code">Example of bad code<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#example-of-bad-code"><i class="material-icons">link</i></a></h4><p>Sometimes you want to display an example of bad code or bad design.</p><p>You should be careful. Readers don't always read carefully and are likely to copy and paste your example of bad code in their own applications. So don't display bad code often.</p><p>When you do, set the <code>class</code> to <code>avoid</code>. The code snippet will be framed in bright red to grab the reader's attention.</p><p>Here's the markup for an "avoid" example in the <a href="guide/styleguide#style-05-03" title="Style 05-03: components as elements"><em>Angular Style Guide</em></a>.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-example path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" header="app/heroes/hero-button/hero-button.component.ts"&gt; &lt;/code-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-example</span><span class="pln">
  </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts"</span><span class="pln">
  </span><span class="atn">region</span><span class="pun">=</span><span class="atv">"example"</span><span class="pln">
  </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"app/heroes/hero-button/hero-button.component.ts"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/code-example&gt;</span></code>
    </pre></aio-code></code-example><code-example path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" header="app/heroes/hero-button/hero-button.component.ts" ng-version="9.0.0-rc.11" class="avoidFile"><div style="display:none">/* avoid */ @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: '[tohHeroButton]', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './hero-button.component.html' }) export class HeroButtonComponent {}</div><header class="ng-star-inserted">app/heroes/hero-button/hero-button.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app/heroes/hero-button/hero-button.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">/* avoid */</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'[tohHeroButton]'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./hero-button.component.html'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">HeroButtonComponent</span><span class="pln"> </span><span class="pun">{}</span></code>
    </pre></aio-code></code-example><a id="code-tabs"></a><h3 id="code-tabs">Code Tabs<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-tabs"><i class="material-icons">link</i></a></h3><p>Code tabs display code much like <em>code examples</em> do. The added advantage is that they can display multiple code samples within a tabbed interface. Each tab is displayed using <em>code pane</em>.</p><h4 id="code-tabs-attributes">Code-tabs attributes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-tabs-attributes"><i class="material-icons">link</i></a></h4><ul><li><code>linenums</code>: The value can be <code>true</code>, <code>false</code> or a number indicating the starting line number. If not specified, it defaults to <code>false</code>.</li></ul><h4 id="code-pane-attributes">Code-pane attributes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#code-pane-attributes"><i class="material-icons">link</i></a></h4><ul><li><code>path</code> - a file in the content/examples folder</li><li><code>header</code> - seen in the header of a tab</li><li><code>linenums</code> - overrides the <code>linenums</code> property at the <code>code-tabs</code> level for this particular pane. The value can be <code>true</code>, <code>false</code> or a number indicating the starting line number. If not specified, it defaults to <code>false</code>.</li></ul><p>The next example displays multiple code tabs, each with its own header. It demonstrates control over display of line numbers at both the <code>&lt;code-tabs&gt;</code> and <code>&lt;code-pane&gt;</code> levels.</p><code-tabs linenums="true" ng-version="9.0.0-rc.11"><div style="display:none"><code-pane header="app.component.html" path="docs-style-guide/src/app/app.component.html">&lt;h1&gt;{{title}}&lt;/h1&gt; &lt;h2&gt;My Heroes&lt;/h2&gt; &lt;ul class="heroes"&gt; &lt;li *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"&gt; &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}} &lt;/li&gt; &lt;/ul&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="selectedHero"&gt; &lt;h2&gt;{{selectedHero.name}} details!&lt;/h2&gt; &lt;div&gt;&lt;label&gt;id: &lt;/label&gt;{{selectedHero.id}}&lt;/div&gt; &lt;div&gt; &lt;label&gt;name: &lt;/label&gt; &lt;input [(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]="selectedHero.name" placeholder="name"/&gt; &lt;/div&gt; &lt;/div&gt;</code-pane><code-pane header="app.component.ts" path="docs-style-guide/src/app/app.component.ts" linenums="false">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { Hero, HEROES } from './hero'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-root', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './app.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./app.component.css'] }) export class AppComponent { title = 'Authors Style Guide Sample'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } }</code-pane><code-pane header="app.component.css (heroes)" path="docs-style-guide/src/app/app.component.css" region="heroes">.heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; }</code-pane><code-pane header="package.json (scripts)" path="docs-style-guide/package.1.json">{ "scripts": { "start": "concurrently \"npm run build:watch\" \"npm run serve\"", "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", "lint": "tslint ./src/**/*.ts -t verbose" } }</code-pane></div><mat-card class="mat-card"><mat-tab-group class="mat-tab-group code-tab-group mat-primary"><mat-tab-header class="mat-tab-header"><div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-tab-header-pagination-disabled"><div class="mat-tab-header-pagination-chevron"></div></div><div class="mat-tab-label-container"><div role="tablist" class="mat-tab-list" style="transform:translateX(0)"><div class="mat-tab-labels"><div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label mat-tab-label-active ng-star-inserted" id="mat-tab-label-0-0" tabindex="0" aria-posinset="1" aria-setsize="4" aria-controls="mat-tab-content-0-0" aria-selected="true" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">app.component.html</span></div></div><div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label ng-star-inserted" id="mat-tab-label-0-1" tabindex="-1" aria-posinset="2" aria-setsize="4" aria-controls="mat-tab-content-0-1" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">app.component.ts</span></div></div><div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label ng-star-inserted" id="mat-tab-label-0-2" tabindex="-1" aria-posinset="3" aria-setsize="4" aria-controls="mat-tab-content-0-2" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">app.component.css (heroes)</span></div></div><div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label ng-star-inserted" id="mat-tab-label-0-3" tabindex="-1" aria-posinset="4" aria-setsize="4" aria-controls="mat-tab-content-0-3" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">package.json (scripts)</span></div></div></div><mat-ink-bar class="mat-ink-bar" style="visibility:visible;left:0;width:180px"></mat-ink-bar></div></div><div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-tab-header-pagination-disabled"><div class="mat-tab-header-pagination-chevron"></div></div></mat-tab-header><div class="mat-tab-body-wrapper"><mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c48-2 mat-tab-body-active ng-star-inserted" id="mat-tab-content-0-0" aria-labelledby="mat-tab-label-0-0"><div class="mat-tab-body-content ng-tns-c48-2 ng-trigger ng-trigger-translateTab" style="transform:none"><aio-code class="ng-star-inserted" style=""><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="tag">&lt;h1&gt;</span><span class="pln">{{title}}</span><span class="tag">&lt;/h1&gt;</span></li><li class="L1"><span class="tag">&lt;h2&gt;</span><span class="pln">My Heroes</span><span class="tag">&lt;/h2&gt;</span></li><li class="L2"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"heroes"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">  </span><span class="tag">&lt;li</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let hero of heroes"</span></li><li class="L4"><span class="pln">    [</span><span class="atn">class</span><span class="pln">.</span><span class="atn">selected</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"hero === selectedHero"</span></li><li class="L5"><span class="pln">    (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"onSelect(hero)"</span><span class="tag">&gt;</span></li><li class="L6"><span class="pln">    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"badge"</span><span class="tag">&gt;</span><span class="pln">{{hero.id}}</span><span class="tag">&lt;/span&gt;</span><span class="pln"> {{hero.name}}</span></li><li class="L7"><span class="pln">  </span><span class="tag">&lt;/li&gt;</span></li><li class="L8"><span class="tag">&lt;/ul&gt;</span></li><li class="L9"><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"selectedHero"</span><span class="tag">&gt;</span></li><li class="L0"><span class="pln">  </span><span class="tag">&lt;h2&gt;</span><span class="pln">{{selectedHero.name}} details!</span><span class="tag">&lt;/h2&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;div&gt;&lt;label&gt;</span><span class="pln">id: </span><span class="tag">&lt;/label&gt;</span><span class="pln">{{selectedHero.id}}</span><span class="tag">&lt;/div&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div&gt;</span></li><li class="L3"><span class="pln">    </span><span class="tag">&lt;label&gt;</span><span class="pln">name: </span><span class="tag">&lt;/label&gt;</span></li><li class="L4"><span class="pln">    </span><span class="tag">&lt;input</span><span class="pln"> [(</span><a href="api/forms/NgModel" class="code-anchor"><span class="atn">ngModel</span></a><span class="pln">)]</span><span class="pun">=</span><span class="atv">"selectedHero.name"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"name"</span><span class="tag">/&gt;</span></li><li class="L5"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></li><li class="L6"><span class="tag">&lt;/div&gt;</span></li></ol></code>
    </pre></aio-code></div></mat-tab-body><mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c48-3 ng-star-inserted" id="mat-tab-content-0-1" aria-labelledby="mat-tab-label-0-1"><div class="mat-tab-body-content ng-tns-c48-3 ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body><mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c48-4 ng-star-inserted" id="mat-tab-content-0-2" aria-labelledby="mat-tab-label-0-2"><div class="mat-tab-body-content ng-tns-c48-4 ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body><mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c48-5 ng-star-inserted" id="mat-tab-content-0-3" aria-labelledby="mat-tab-label-0-3"><div class="mat-tab-body-content ng-tns-c48-5 ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body></div></mat-tab-group></mat-card></code-tabs><p>Here's the markup for that example.</p><p>Note how the <code>linenums</code> attribute in the <code>&lt;code-tabs&gt;</code> explicitly enables numbering for all panes. The <code>linenums</code> attribute in the second pane disables line numbering for <em>itself only</em>.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-tabs linenums="true"&gt; &lt;code-pane header="app.component.html" path="docs-style-guide/src/app/app.component.html"&gt; &lt;/code-pane&gt; &lt;code-pane header="app.component.ts" path="docs-style-guide/src/app/app.component.ts" linenums="false"&gt; &lt;/code-pane&gt; &lt;code-pane header="app.component.css (heroes)" path="docs-style-guide/src/app/app.component.css" region="heroes"&gt; &lt;/code-pane&gt; &lt;code-pane header="package.json (scripts)" path="docs-style-guide/package.1.json"&gt; &lt;/code-pane&gt; &lt;/code-tabs&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-tabs</span><span class="pln"> </span><span class="atn">linenums</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;code-pane</span><span class="pln">
    </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"app.component.html"</span><span class="pln">
    </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/src/app/app.component.html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/code-pane&gt;</span><span class="pln">
  </span><span class="tag">&lt;code-pane</span><span class="pln">
    </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"app.component.ts"</span><span class="pln">
    </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/src/app/app.component.ts"</span><span class="pln">
    </span><span class="atn">linenums</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/code-pane&gt;</span><span class="pln">
  </span><span class="tag">&lt;code-pane</span><span class="pln">
    </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"app.component.css (heroes)"</span><span class="pln">
    </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/src/app/app.component.css"</span><span class="pln">
    </span><span class="atn">region</span><span class="pun">=</span><span class="atv">"heroes"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/code-pane&gt;</span><span class="pln">
  </span><span class="tag">&lt;code-pane</span><span class="pln">
    </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"package.json (scripts)"</span><span class="pln">
    </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/package.1.json"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/code-pane&gt;</span><span class="pln">
</span><span class="tag">&lt;/code-tabs&gt;</span></code>
    </pre></aio-code></code-example><a id="source-code-markup"></a><h2 id="source-code-markup">Source code markup<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#source-code-markup"><i class="material-icons">link</i></a></h2><p>You must add special code snippet markup to sample source code files before they can be displayed by <code>&lt;code-example&gt;</code> and <code>&lt;code-tabs&gt;</code> components.</p><div class="alert is-helpful"><p>The sample source code for this page, located in <code>context/examples/docs-style-guide</code>, contains examples of every code snippet markup described in this section.</p></div><p>Code snippet markup is always in the form of a comment. Here's the default <em>docregion</em> markup for a TypeScript or JavaScript file:</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">// #docregion ... some code ... // #enddocregion</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// #docregion</span><span class="pln">
</span><span class="pun">...</span><span class="pln"> some code </span><span class="pun">...</span><span class="pln">
</span><span class="com">// #enddocregion</span></code>
    </pre></aio-code></code-example><p>Different file types have different comment syntax so adjust accordingly.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;!-- #docregion --&gt; ... some <a href="api/core/SecurityContext#HTML" class="code-anchor">HTML</a> ... &lt;!-- #enddocregion --&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">&lt;!-- #docregion --&gt;</span><span class="pln">
... some </span><a href="api/core/SecurityContext#HTML" class="code-anchor"><span class="pln">HTML</span></a><span class="pln"> ...
</span><span class="com">&lt;!-- #enddocregion --&gt;</span></code>
    </pre></aio-code></code-example><code-example ng-version="9.0.0-rc.11"><div style="display:none">/* #docregion */ ... some CSS ... /* #enddocregion */</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">/* #docregion */</span><span class="pln">
</span><span class="pun">...</span><span class="pln"> some CSS </span><span class="pun">...</span><span class="pln">
</span><span class="com">/* #enddocregion */</span></code>
    </pre></aio-code></code-example><p>The doc generation process erases these comments before displaying them in the doc viewer. It also strips them from stackblitz and sample code downloads.</p><div class="alert is-important"><p>Code snippet markup is not supported in JSON files because comments are forbidden in JSON files. See <a href="guide/docs-style-guide#json-files">below</a> for details and workarounds.</p></div><h4 id="docregion"><em>#docregion</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#docregion"><i class="material-icons">link</i></a></h4><p>The <em>#docregion</em> is the most important kind of code snippet markup.</p><p>The <code>&lt;code-example&gt;</code> and <code>&lt;code-tabs&gt;</code> components won't display a source code file unless it has a <em>#docregion</em>.</p><p>The <em>#docregion</em> comment begins a code snippet region. Every line of code <em>after</em> that comment belongs in the region <em>until</em> the code fragment processor encounters the end of the file or a closing <em>#enddocregion</em>.</p><div class="alert is-helpful"><p>The <code>src/main.ts</code> is a simple example of a file with a single <em>#docregion</em> at the top of the file.</p><code-example path="docs-style-guide/src/main.ts" header="src/main.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a> } from '@angular/core'; import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a>(); } <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule);</div><header class="ng-star-inserted">src/main.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/main.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app/app.module'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> environment </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./environments/environment'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">environment</span><span class="pun">.</span><span class="pln">production</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pun">();</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">);</span></code>
    </pre></aio-code></code-example></div><h4 id="named-docregions">Named <em>#docregions</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#named-docregions"><i class="material-icons">link</i></a></h4><p>You'll often display multiple snippets from different fragments within the same file. You distinguish among them by giving each fragment its own <em>#docregion name</em> as follows.</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">// #docregion region-name ... some code ... // #enddocregion region-name</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// #docregion region-name</span><span class="pln">
</span><span class="pun">...</span><span class="pln"> some code </span><span class="pun">...</span><span class="pln">
</span><span class="com">// #enddocregion region-name</span></code>
    </pre></aio-code></code-example><p>Remember to refer to this region by name in the <code>region</code> attribute of the <code>&lt;code-example&gt;</code> or <code>&lt;code-pane&gt;</code> as you did in an example above like this:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-example path="docs-style-guide/src/app/app.module.ts" region="class"&gt;&lt;/code-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-example</span><span class="pln">
  </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/src/app/app.module.ts"</span><span class="pln">
  </span><span class="atn">region</span><span class="pun">=</span><span class="atv">"class"</span><span class="tag">&gt;&lt;/code-example&gt;</span></code>
    </pre></aio-code></code-example><p>The <em>#docregion</em> with no name is the <em>default region</em>. Do <em>not</em> set the <code>region</code> attribute when referring to the default <em>#docregion</em>.</p><h4 id="nested-docregions">Nested <em>#docregions</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#nested-docregions"><i class="material-icons">link</i></a></h4><p>You can nest <em>#docregions</em> within <em>#docregions</em></p><code-example ng-version="9.0.0-rc.11"><div style="display:none">// #docregion ... some code ... // #docregion inner-region ... more code ... // #enddocregion inner-region ... yet more code ... /// #enddocregion</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// #docregion</span><span class="pln">
</span><span class="pun">...</span><span class="pln"> some code </span><span class="pun">...</span><span class="pln">
</span><span class="com">// #docregion inner-region</span><span class="pln">
</span><span class="pun">...</span><span class="pln"> more code </span><span class="pun">...</span><span class="pln">
</span><span class="com">// #enddocregion inner-region</span><span class="pln">
</span><span class="pun">...</span><span class="pln"> yet more code </span><span class="pun">...</span><span class="pln">
</span><span class="com">/// #enddocregion</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p>The <code>src/app/app.module.ts</code> file has a good example of a nested region.</p></div><h4 id="combining-fragments">Combining fragments<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#combining-fragments"><i class="material-icons">link</i></a></h4><p>You can combine several fragments from the same file into a single code snippet by defining multiple <em>#docregions</em> with the <em>same region name</em>.</p><p>Examine the <code>src/app/app.component.ts</code> file which defines two nested <em>#docregions</em>.</p><p>The inner, <code>class-skeleton</code> region appears twice, once to capture the code that opens the class definition and once to capture the code that closes the class definition.</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">// #docplaster ... // #docregion class, class-skeleton export class AppComponent { // #enddocregion class-skeleton title = 'Authors Style Guide Sample'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } // #docregion class-skeleton } // #enddocregion class, class-skeleton</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// #docplaster</span><span class="pln">
</span><span class="pun">...</span><span class="pln">
</span><span class="com">// #docregion class, class-skeleton</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com">// #enddocregion class-skeleton</span><span class="pln">
  title </span><span class="pun">=</span><span class="pln"> </span><span class="str">'Authors Style Guide Sample'</span><span class="pun">;</span><span class="pln">
  heroes </span><span class="pun">=</span><span class="pln"> HEROES</span><span class="pun">;</span><span class="pln">
  selectedHero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">;</span><span class="pln">

  onSelect</span><span class="pun">(</span><span class="pln">hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">):</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">selectedHero </span><span class="pun">=</span><span class="pln"> hero</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="com">// #docregion class-skeleton</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="com">// #enddocregion class, class-skeleton</span></code>
    </pre></aio-code></code-example><p>Here's are the two corresponding code snippets displayed side-by-side.</p><code-tabs ng-version="9.0.0-rc.11"><div style="display:none"><code-pane header="app.component.ts (class)" path="docs-style-guide/src/app/app.component.ts" region="class">export class AppComponent { title = 'Authors Style Guide Sample'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } }</code-pane><code-pane header="app.component.ts (class-skeleton)" path="docs-style-guide/src/app/app.component.ts" region="class-skeleton">export class AppComponent { }</code-pane></div><mat-card class="mat-card"><mat-tab-group class="mat-tab-group code-tab-group mat-primary"><mat-tab-header class="mat-tab-header"><div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-tab-header-pagination-disabled"><div class="mat-tab-header-pagination-chevron"></div></div><div class="mat-tab-label-container"><div role="tablist" class="mat-tab-list" style="transform:translateX(0)"><div class="mat-tab-labels"><div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label mat-tab-label-active ng-star-inserted" id="mat-tab-label-1-0" tabindex="0" aria-posinset="1" aria-setsize="2" aria-controls="mat-tab-content-1-0" aria-selected="true" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">app.component.ts (class)</span></div></div><div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label ng-star-inserted" id="mat-tab-label-1-1" tabindex="-1" aria-posinset="2" aria-setsize="2" aria-controls="mat-tab-content-1-1" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">app.component.ts (class-skeleton)</span></div></div></div><mat-ink-bar class="mat-ink-bar" style="visibility:visible;left:0;width:207px"></mat-ink-bar></div></div><div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-tab-header-pagination-disabled"><div class="mat-tab-header-pagination-chevron"></div></div></mat-tab-header><div class="mat-tab-body-wrapper"><mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c48-6 mat-tab-body-active ng-star-inserted" id="mat-tab-content-1-0" aria-labelledby="mat-tab-label-1-0"><div class="mat-tab-body-content ng-tns-c48-6 ng-trigger ng-trigger-translateTab" style="transform:none"><aio-code class="ng-star-inserted" style=""><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from app.component.ts (class)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  title </span><span class="pun">=</span><span class="pln"> </span><span class="str">'Authors Style Guide Sample'</span><span class="pun">;</span><span class="pln">
  heroes </span><span class="pun">=</span><span class="pln"> HEROES</span><span class="pun">;</span><span class="pln">
  selectedHero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">;</span><span class="pln">

  onSelect</span><span class="pun">(</span><span class="pln">hero</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Hero</span><span class="pun">):</span><span class="pln"> </span><span class="kwd">void</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">selectedHero </span><span class="pun">=</span><span class="pln"> hero</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></div></mat-tab-body><mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c48-7 ng-star-inserted" id="mat-tab-content-1-1" aria-labelledby="mat-tab-label-1-1"><div class="mat-tab-body-content ng-tns-c48-7 ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body></div></mat-tab-group></mat-card></code-tabs><p>Some observations:</p><ul><li><p>The <code>#docplaster</code> at the top is another bit of code snippet markup. It tells the processor how to join the fragments into a single snippet.</p><p>In this example, we tell the processor to put the fragments together without anything in between - without any "plaster". Most sample files define this <em>empty plaster</em>.</p><p>If we neglected to add, <code>#docplaster</code>, the processor would insert the <em>default</em> plaster - an ellipsis comment - between the fragments. Try removing the <code>#docplaster</code> comment yourself to see the effect.</p></li><li><p>One <code>#docregion</code> comment mentions <strong><em>two</em></strong> region names as does an <code>#enddocregion</code> comment. This is a convenient way to start (or stop) multiple regions on the same code line. You could have put these comments on separate lines and many authors prefer to do so.</p></li></ul><h4 id="json-files">JSON files<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#json-files"><i class="material-icons">link</i></a></h4><p>Code snippet markup is not supported for JSON files because comments are forbidden in JSON files.</p><p>You can display an entire JSON file by referring to it in the <code>src</code> attribute. But you can't display JSON fragments because you can't add <code>#docregion</code> tags to the file.</p><p>If the JSON file is too big, you could copy the nodes-of-interest into markdown backticks.</p><p>Unfortunately, it's easy to mistakenly create invalid JSON that way. The preferred way is to create a JSON partial file with the fragment you want to display.</p><p>You can't test this partial file and you'll never use it in the application. But at least your IDE can confirm that it is syntactically correct.</p><p>Here's an example that excerpts certain scripts from <code>package.json</code> into a partial file named <code>package.1.json</code>.</p><code-example path="docs-style-guide/package.1.json" header="package.json (selected scripts)" ng-version="9.0.0-rc.11"><div style="display:none">{ "scripts": { "start": "concurrently \"npm run build:watch\" \"npm run serve\"", "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", "lint": "tslint ./src/**/*.ts -t verbose" } }</div><header class="ng-star-inserted">package.json (selected scripts)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from package.json (selected scripts)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
  </span><span class="str">"scripts"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"start"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"concurrently \"npm run build:watch\" \"npm run serve\""</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"test"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"concurrently \"npm run build:watch\" \"karma start karma.conf.js\""</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"lint"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"tslint ./src/**/*.ts -t verbose"</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;code-example path="docs-style-guide/package.1.json" header="package.json (selected scripts)"&gt;&lt;/code-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;code-example</span><span class="pln">
  </span><span class="atn">path</span><span class="pun">=</span><span class="atv">"docs-style-guide/package.1.json"</span><span class="pln">
  </span><span class="atn">header</span><span class="pun">=</span><span class="atv">"package.json (selected scripts)"</span><span class="tag">&gt;&lt;/code-example&gt;</span></code>
    </pre></aio-code></code-example><h4 id="partial-file-naming">Partial file naming<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#partial-file-naming"><i class="material-icons">link</i></a></h4><p>Many guides tell a story. In that story, the app evolves incrementally, often with simplistic or incomplete code along the way.</p><p>To tell that story in code, you'll often need to create partial files or intermediate versions of the final source code file with fragments of code that don't appear in the final app.</p><p>Such partial and intermediate files need their own names. Follow the doc sample naming convention. Add a number before the file extension as illustrated here:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">package.1.json app.component.1.ts app.component.2.ts</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">package.1.json
app.component.1.ts
app.component.2.ts</span></code>
    </pre></aio-code></code-example><p>You'll find many such files among the samples in the Angular documentation.</p><p>Remember to exclude these files from stackblitz by listing them in the <code>stackblitz.json</code> as illustrated here.</p><code-example path="docs-style-guide/stackblitz.json" header="stackblitz.json" ng-version="9.0.0-rc.11"><div style="display:none">{ "description": "Authors <a href="api/animations/style" class="code-anchor">style</a> guide", "files": [ "!**/*.d.ts", "!**/*.js", "!**/*.[1,2,3].*" ], "tags": ["author", "<a href="api/animations/style" class="code-anchor">style</a> guide"] }</div><header class="ng-star-inserted">stackblitz.json</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from stackblitz.json">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">{</span><span class="pln">
  </span><span class="str">"description"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Authors </span><a href="api/animations/style" class="code-anchor"><span class="str">style</span></a><span class="str"> guide"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"files"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="str">"!**/*.d.ts"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"!**/*.js"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"!**/*.[1,2,3].*"</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  </span><span class="str">"tags"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"author"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"</span><a href="api/animations/style" class="code-anchor"><span class="str">style</span></a><span class="str"> guide"</span><span class="pun">]</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><a id="live-examples"></a><h2 id="live-examples">Live examples<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#live-examples"><i class="material-icons">link</i></a></h2><p>By adding <code>&lt;live-example&gt;</code> to the page you generate links that run sample code in the Stackblitz live coding environment and download that code to the reader's file system.</p><p>Live examples (AKA "stackblitz") are defined by one or more <code>stackblitz.json</code> files in the root of a code sample folder. Each sample folder usually has a single unnamed definition file, the default <code>stackblitz.json</code>.</p><div class="alert is-helpful"><p>You can create additional, named definition files in the form <code>name.stackblitz.json</code>. See <code>content/examples/testing</code> for examples.</p><p>The schema for a <code>stackblitz.json</code> hasn't been documented yet but looking at the <code>stackblitz.json</code> files in the example folders should tell you most of what you need to know.</p></div><p>Adding <code>&lt;live-example&gt;&lt;/live-example&gt;</code> to the page generates the two default links.</p><p><live-example ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="在线例子" href="generated/live-examples/docs-style-guide/stackblitz.html">在线例子</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/docs-style-guide/docs-style-guide.zip">下载范例</a></span></span></span></live-example></p><ol><li><p>a link to the Stackblitz defined by the default <code>stackblitz.json</code> file located in the code sample folder with the same name as the guide page.</p></li><li><p>a link that downloads that sample.</p></li></ol><p>Clicking the first link opens the code sample on StackBlitz in a new browser tab.</p><p>You can change the appearance and behavior of the live example with attributes and classes.</p><h3 class="no-toc" id="custom-label-and-tooltip">Custom label and tooltip<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#custom-label-and-tooltip"><i class="material-icons">link</i></a></h3><p>Give the live example anchor a custom label and tooltip by setting the <code>title</code> attribute.</p><p><live-example title="Live Example with title" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="Live Example with title" href="generated/live-examples/docs-style-guide/stackblitz.html">Live Example with title</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/docs-style-guide/docs-style-guide.zip">下载范例</a></span></span></span></live-example></p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example title="Live Example with title"&gt;&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Live Example with title"</span><span class="tag">&gt;&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><p>You can achieve the same effect by putting the label between the <code>&lt;live-example&gt;</code> tags:</p><p><live-example ng-version="9.0.0-rc.11"><span style="display:none">Live example with content label</span><span><span class="ng-star-inserted"><a target="_blank" title="Live example with content label" href="generated/live-examples/docs-style-guide/stackblitz.html">Live example with content label</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/docs-style-guide/docs-style-guide.zip">下载范例</a></span></span></span></live-example></p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example&gt;Live example with content label&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example&gt;</span><span class="pln">Live example with content label</span><span class="tag">&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="live-example-from-another-guide">Live example from another guide<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#live-example-from-another-guide"><i class="material-icons">link</i></a></h3><p>To link to a Stackblitz in a folder whose name is not the same as the current guide page, set the <code>name</code> attribute to the name of that folder.</p><p><live-example name="router" ng-version="9.0.0-rc.11"><span style="display:none">Live Example from the Router guide</span><span><span class="ng-star-inserted"><a target="_blank" title="Live Example from the Router guide" href="generated/live-examples/router/stackblitz.html">Live Example from the Router guide</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/router/router.zip">下载范例</a></span></span></span></live-example></p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example name="router"&gt;Live Example from the <a href="api/router/Router" class="code-anchor">Router</a> guide&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"router"</span><span class="tag">&gt;</span><span class="pln">Live Example from the </span><a href="api/router/Router" class="code-anchor"><span class="pln">Router</span></a><span class="pln"> guide</span><span class="tag">&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="live-example-for-named-stackblitz">Live Example for named Stackblitz<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#live-example-for-named-stackblitz"><i class="material-icons">link</i></a></h3><p>To link to a Stackblitz defined by a named <code>stackblitz.json</code> file, set the <code>stackblitz</code> attribute. The following example links to the Stackblitz defined by <code>second.stackblitz.json</code> in the current guide's directory.</p><p><live-example stackblitz="second" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><a target="_blank" title="在线例子" href="generated/live-examples/docs-style-guide/second.stackblitz.html">在线例子</a><span class="ng-star-inserted"> / <a download="" title="下载范例" href="generated/zips/docs-style-guide/second.docs-style-guide.zip">下载范例</a></span></span></span></live-example></p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example stackblitz="second"&gt;&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example</span><span class="pln"> </span><span class="atn">stackblitz</span><span class="pun">=</span><span class="atv">"second"</span><span class="tag">&gt;&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="live-example-without-download">Live Example without download<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#live-example-without-download"><i class="material-icons">link</i></a></h3><p>To skip the download link, add the <code>noDownload</code> attribute.</p><p><live-example nodownload="" ng-version="9.0.0-rc.11"><span style="display:none">Just the Stackblitz</span><span><span class="ng-star-inserted"><a target="_blank" title="Just the Stackblitz" href="generated/live-examples/docs-style-guide/stackblitz.html">Just the Stackblitz</a></span></span></live-example></p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example noDownload&gt;Just the Stackblitz&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example</span><span class="pln"> </span><span class="atn">noDownload</span><span class="tag">&gt;</span><span class="pln">Just the Stackblitz</span><span class="tag">&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="live-example-with-download-only">Live Example with download-only<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#live-example-with-download-only"><i class="material-icons">link</i></a></h3><p>To skip the live Stackblitz link and only link to the download, add the <code>downloadOnly</code> attribute.</p><p><live-example downloadonly="" ng-version="9.0.0-rc.11"><span style="display:none">Download only</span><span><span class="ng-star-inserted"><a download="" title="Download only" href="generated/zips/docs-style-guide/docs-style-guide.zip">Download only</a></span></span></live-example></p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example downloadOnly&gt;Download only&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example</span><span class="pln"> </span><span class="atn">downloadOnly</span><span class="tag">&gt;</span><span class="pln">Download only</span><span class="tag">&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="embedded-live-example">Embedded live example<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#embedded-live-example"><i class="material-icons">link</i></a></h3><p>By default, a live example link opens a Stackblitz in a separate browser tab. You can embed the Stackblitz within the guide page itself by adding the <code>embedded</code> attribute.</p><p>For performance reasons, the Stackblitz does not start right away. The reader sees an image instead. Clicking the image starts the sometimes-slow process of launching the embedded Stackblitz within an iframe on the page.</p><p>Here's an embedded live example for this guide.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;live-example embedded&gt;&lt;/live-example&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;live-example</span><span class="pln"> </span><span class="atn">embedded</span><span class="tag">&gt;&lt;/live-example&gt;</span></code>
    </pre></aio-code></code-example><p><live-example embedded="" ng-version="9.0.0-rc.11"><span style="display:none"></span><span><span class="ng-star-inserted"><div title="在线例子"><aio-embedded-stackblitz _nghost-ng-docs-c59=""><iframe _ngcontent-ng-docs-c59="" frameborder="0" width="100%" height="100%" src="generated/live-examples/docs-style-guide/stackblitz.html?ctl=1"></iframe></aio-embedded-stackblitz></div><p class="ng-star-inserted">你还可以 <a download="" title="下载范例" href="generated/zips/docs-style-guide/docs-style-guide.zip">下载这个例子</a>。</p></span></span></live-example></p><a id="anchors"></a><h2 id="anchors">Anchors<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#anchors"><i class="material-icons">link</i></a></h2><p>Every section header tag is also an anchor point. Another guide page could add a link to this section by writing:</p><div class="alert is-helpful"><p>See the <a href="guide/docs-style-guide#anchors" title="Style Guide - Anchors">"Anchors"</a> section for details.</p></div><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="alert is-helpful"&gt; See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") section for details. &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-helpful"</span><span class="tag">&gt;</span><span class="pln">

See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") section for details.

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p>When navigating within the page, you can omit the page URL when specifying the link that <a href="guide/docs-style-guide#anchors" title="Anchors">scrolls up</a> to the beginning of this section.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">... the link that [scrolls up](#anchors "Anchors") to ...</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">... the link that [scrolls up](#anchors "Anchors") to ...</span></code>
    </pre></aio-code></code-example><a id="ugly-anchors"></a><h4 id="ugly-long-section-header-anchors">Ugly, long section header anchors<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#ugly-long-section-header-anchors"><i class="material-icons">link</i></a></h4><p>It is often a good idea to <em>lock-in</em> a good anchor name.</p><p>Sometimes the section header text makes for an unattractive anchor. <a href="guide/docs-style-guide#ugly-long-section-header-anchors">This one</a> is pretty bad.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">[This one](#ugly-long-section-header-anchors) is pretty bad.</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">[This one](#ugly-long-section-header-anchors) is pretty bad.</span></code>
    </pre></aio-code></code-example><p>The greater danger is that <strong>a future rewording of the header text would break</strong> a link to this section.</p><p>For these reasons, it is often wise to add a custom anchor explicitly, just above the heading or text to which it applies, using the special <code><a id="name"></a></code> syntax like this.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none"><a id="ugly-anchors"></a> #### Ugly, long section header anchors</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><a id="ugly-anchors"></a><span class="pln">

#### Ugly, long section header anchors</span></code>
    </pre></aio-code></code-example><p>Now <a href="guide/docs-style-guide#ugly-anchors">link to that custom anchor name</a> as you did before.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">Now [link to that custom <a href="api/router/Scroll#anchor" class="code-anchor">anchor</a> name](#ugly-anchors) as you did before.</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">Now [link to that custom </span><a href="api/router/Scroll#anchor" class="code-anchor"><span class="pln">anchor</span></a><span class="pln"> name](#ugly-anchors) as you did before.</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p>Alternatively, you can use the HTML <code>&lt;a&gt;</code> tag.</p><p>If you do, be sure to set the <code>id</code> attribute - not the <code>name</code> attribute! The docs generator will not convert the <code>name</code> to the proper link URL.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;a id="anchors"&gt;&lt;/a&gt; ## Anchors</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"anchors"</span><span class="tag">&gt;&lt;/a&gt;</span><span class="pln">

## Anchors</span></code>
    </pre></aio-code></code-example></div><h2 id="alerts-and-calllouts">Alerts and Calllouts<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#alerts-and-calllouts"><i class="material-icons">link</i></a></h2><p>Alerts and callouts present warnings, extra detail or references to other pages. They can also be used to provide commentary that <em>enriches</em> the reader's understanding of the content being presented.</p><p>An alert or callout <em>must not</em> contain anything <em>essential</em> to that understanding. Don't put a critical instruction or a tutorial step in a subsection.</p><h3 id="alerts">Alerts<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#alerts"><i class="material-icons">link</i></a></h3><p>Alerts draw attention to short important points. Alerts should not be used for multi-line content (use <a href="guide/docs-style-guide#callouts" title="callouts">callouts</a> instead).</p><div class="alert is-helpful"><p>You'll learn about styles for live examples in the <a href="guide/docs-style-guide#live-examples" title="Live examples">section below</a>.</p></div><p>Note that at least one blank line must follow both the opening and closing <code>&lt;div&gt;</code> tags. A blank line before the closing <code>&lt;/div&gt;</code> is customary but not required.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="alert is-helpful"&gt; You'll learn about styles for live examples in the [section below](guide/docs-style-guide#live-examples "Live examples"). &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-helpful"</span><span class="tag">&gt;</span><span class="pln">

You'll learn about styles for live examples in the [section below](guide/docs-style-guide#live-examples "Live examples").

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p>There are three different <em>urgency levels</em> used to style the alerts based on the severity or importance of the content.</p><div class="alert is-critical"><p>A critical alert.</p></div><div class="alert is-important"><p>An important alert.</p></div><div class="alert is-helpful"><p>A helpful, informational alert.</p></div><p>Here is the markup for these alerts.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="alert is-critical"&gt; A critical alert. &lt;/div&gt; &lt;div class="alert is-important"&gt; An important alert. &lt;/div&gt; &lt;div class="alert is-helpful"&gt; A helpful, informational alert. &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-critical"</span><span class="tag">&gt;</span><span class="pln">

A critical alert.

</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-important"</span><span class="tag">&gt;</span><span class="pln">

An important alert.

</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-helpful"</span><span class="tag">&gt;</span><span class="pln">

A helpful, informational alert.

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><h3 id="callouts">Callouts<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#callouts"><i class="material-icons">link</i></a></h3><p>Callouts, like alerts, are meant to draw attention to important points. Use a callout when you want a riveting header and multi-line content.</p><p>If you have more than two paragraphs, consider creating a new page or making it part of the main content.</p><p>Callouts use the same <em>urgency levels</em> that alerts do.</p><div class="callout is-critical"><header>A critical point</header><p><strong>Pitchfork hoodie semiotics</strong>, roof party pop-up <em>paleo</em> messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix</p></div><div class="callout is-important"><header>An important point</header><p><strong>Pitchfork hoodie semiotics</strong>, roof party pop-up <em>paleo</em> messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix</p></div><div class="callout is-helpful"><header>A helpful or informational point</header><p><strong>Pitchfork hoodie semiotics</strong>, roof party pop-up <em>paleo</em> messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix</p></div><p>Here is the markup for the first of these callouts.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="callout is-critical"&gt; &lt;header&gt;A critical point&lt;/header&gt; **Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"callout is-critical"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;header&gt;</span><span class="pln">A critical point</span><span class="tag">&lt;/header&gt;</span><span class="pln">

**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p>Notice that:</p><ul><li>the callout header text is forced to all upper case</li><li>the callout body can be written in markdown</li><li>a blank line separates the <code>&lt;/header&gt;</code> tag from the markdown content</li></ul><p>Callouts are meant to grab the user's attention. They are not for casual asides. Please use them sparingly.</p><h2 id="trees">Trees<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#trees"><i class="material-icons">link</i></a></h2><p>Trees can represent hierarchical data.</p><div class="filetree"><div class="file">sample-dir</div><div class="children"><div class="file">src</div><div class="children"><div class="file">app</div><div class="children"><div class="file">app.component.ts</div><div class="file">app.module.ts</div></div><div class="file">styles.css</div><div class="file">tsconfig.json</div></div><div class="file">node_modules ...</div><div class="file">package.json</div></div></div><p>Here is the markup for this file tree.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class='filetree'&gt; &lt;div class='file'&gt; sample-dir &lt;/div&gt; &lt;div class='children'&gt; &lt;div class='file'&gt; src &lt;/div&gt; &lt;div class='children'&gt; &lt;div class='file'&gt; app &lt;/div&gt; &lt;div class='children'&gt; &lt;div class='file'&gt; app.component.ts &lt;/div&gt; &lt;div class='file'&gt; app.module.ts &lt;/div&gt; &lt;/div&gt; &lt;div class='file'&gt; styles.css &lt;/div&gt; &lt;div class='file'&gt; tsconfig.json &lt;/div&gt; &lt;/div&gt; &lt;div class='file'&gt; node_modules ... &lt;/div&gt; &lt;div class='file'&gt; package.json &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'filetree'</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
        sample-dir
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'children'</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
          src
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'children'</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
              app
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'children'</span><span class="tag">&gt;</span><span class="pln">
                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
                  app.component.ts
                </span><span class="tag">&lt;/div&gt;</span><span class="pln">
                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
                  app.module.ts
                </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
              styles.css
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
              tsconfig.json
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
          node_modules ...
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">'file'</span><span class="tag">&gt;</span><span class="pln">
          package.json
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><h2 id="tables">Tables<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#tables"><i class="material-icons">link</i></a></h2><p>Use HTML tables to present tabular data.</p><style>td,th{vertical-align:top}</style><table><tbody><tr><th>Framework</th><th>Task</th><th>Speed</th></tr><tr><td><code>AngularJS</code></td><td>Routing</td><td>Fast</td></tr><tr><td><code>Angular v2</code></td><td>Routing</td><td><p><em>Faster</em></p></td></tr><tr><td><code>Angular v4</code></td><td>Routing</td><td><p><strong>Fastest :)</strong></p></td></tr></tbody></table><p>Here is the markup for this table.</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;<a href="api/animations/style" class="code-anchor">style</a>&gt; td, th {vertical-align: top} &lt;/<a href="api/animations/style" class="code-anchor">style</a>&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Framework&lt;/th&gt; &lt;th&gt;Task&lt;/th&gt; &lt;th&gt;Speed&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;AngularJS&lt;/code&gt;&lt;/td&gt; &lt;td&gt;Routing&lt;/td&gt; &lt;td&gt;Fast&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;Angular v2&lt;/code&gt;&lt;/td&gt; &lt;td&gt;Routing&lt;/td&gt; &lt;!-- can use markdown too; remember blank lines --&gt; &lt;td&gt; *Faster* &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;code&gt;Angular v4&lt;/code&gt;&lt;/td&gt; &lt;td&gt;Routing&lt;/td&gt; &lt;td&gt; **Fastest :)** &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;</span><a href="api/animations/style" class="code-anchor"><span class="tag">style</span></a><span class="tag">&gt;</span><span class="pln">
  td</span><span class="pun">,</span><span class="pln"> th </span><span class="pun">{</span><span class="pln">vertical</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> top</span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/</span><a href="api/animations/style" class="code-anchor"><span class="tag">style</span></a><span class="tag">&gt;</span><span class="pln">

</span><span class="tag">&lt;table&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Framework</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Task</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Speed</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;&lt;code&gt;</span><span class="pln">AngularJS</span><span class="tag">&lt;/code&gt;&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Routing</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Fast</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;&lt;code&gt;</span><span class="pln">Angular v2</span><span class="tag">&lt;/code&gt;&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Routing</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- can use markdown too; remember blank lines --&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">

      *Faster*

    </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;&lt;code&gt;</span><span class="pln">Angular v4</span><span class="tag">&lt;/code&gt;&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">Routing</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;td&gt;</span><span class="pln">

      **Fastest :)**

    </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span></code>
    </pre></aio-code></code-example><h2 id="images">Images<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#images"><i class="material-icons">link</i></a></h2><h3 class="no-toc" id="image-location">Image location<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#image-location"><i class="material-icons">link</i></a></h3><p>Store images in the <code>content/images</code> directory in a folder with the same URL as the guide page. Images for this "Authors Style Guide" page belong in the <code>content/images/guide/docs-style-guide</code> folder.</p><p>Angular doc generation copies these image folders to the <em>runtime</em> location, <code>generated/images</code>. Set the image <code>src</code> attribute to begin in <em>that</em> directory.</p><p>Here's the <code>src</code> attribute for the "flying hero" image belonging to this page.</p><code-example ng-version="9.0.0-rc.11"><div style="display:none">src="generated/images/guide/docs-style-guide/flying-hero.png"</div><aio-code><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">src</span><span class="pun">=</span><span class="str">"generated/images/guide/docs-style-guide/flying-hero.png"</span></code>
    </pre></aio-code></code-example><h3 class="no-toc" id="use-the-html-img-tag">Use the HTML <i>&lt;img&gt;</i> tag<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#use-the-html-img-tag"><i class="material-icons">link</i></a></h3><p><strong>Do not use the markdown image syntax, ![...](...).</strong></p><p>Images should be specified in an <code>&lt;img&gt;</code> tag.</p><p>For accessibility, always set the <code>alt</code> attribute with a meaningful description of the image.</p><p>You should nest the <code>&lt;img&gt;</code> tag within a <code>&lt;div class="lightbox"&gt;</code> tag, which styles the image within a drop-shadow frame. You'll need the editor's permission to skip the <code>lightbox</code> class on its <code>div</code> encapsulation.</p><p>Here's a conforming example</p><div class="lightbox"><img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying hero" width="3125" height="2374"></div><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="lightbox"&gt; &lt;img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying hero"&gt; &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"generated/images/guide/docs-style-guide/flying-hero.png"</span><span class="pln">
    </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"flying hero"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p><em>Note that the HTML image element does not have a closing tag.</em></p><h3 class="no-toc" id="image-dimensions">Image dimensions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#image-dimensions"><i class="material-icons">link</i></a></h3><p>The doc generator reads the image dimensions from the file and adds width and height attributes to the <code>img</code> tag automatically. If you want to control the size of the image, supply your own width and height attributes.</p><p>Here's the "flying hero" at a more reasonable scale.</p><div class="lightbox"><img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200"></div><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="lightbox"&gt; &lt;img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200"&gt; &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lightbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"generated/images/guide/docs-style-guide/flying-hero.png"</span><span class="pln">
    </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"flying Angular hero"</span><span class="pln">
    </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p>Wide images can be a problem. Most browsers try to rescale the image but wide images may overflow the document in certain viewports.</p><p><strong>Do not set a width greater than 700px</strong>. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of <code>source-map-explorer</code> output from the "Ahead-of-time Compilation" guide:</p><a href="generated/images/guide/docs-style-guide/toh-pt6-bundle.png" title="Click to view larger image"><div class="lightbox"><img src="generated/images/guide/docs-style-guide/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle" width="300px"></div></a><h3 class="no-toc" id="image-compression">Image compression<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#image-compression"><i class="material-icons">link</i></a></h3><p>Large image files can be slow to load, harming the user experience. Always compress the image. Consider using an image compression web site such as <a href="https://tinypng.com/" title="tinypng">tinypng</a>.</p><h3 class="no-toc" id="floating-images">Floating images<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#floating-images"><i class="material-icons">link</i></a></h3><p>You can float the image to the left or right of text by applying the class="left" or class="right" attributes respectively.</p><p><img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200" class="left"></p><p>This text wraps around to the right of the floating "flying hero" image.</p><p>Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add <code>&lt;br class="clear"&gt;</code> where the text should break.</p><br class="clear"><p>The markup for the above example is:</p><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200" class="left"&gt; This text wraps around to the right of the floating "flying hero" image. Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add `&lt;br class="clear"&gt;` where the text should break. &lt;br class="clear"&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"generated/images/guide/docs-style-guide/flying-hero.png"</span><span class="pln">
   </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"flying Angular hero"</span><span class="pln">
   </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"200"</span><span class="pln">
   </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"left"</span><span class="tag">&gt;</span><span class="pln">

This text wraps around to the right of the floating "flying hero" image.

Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add `</span><span class="tag">&lt;br</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"clear"</span><span class="tag">&gt;</span><span class="pln">` where the text should break.

</span><span class="tag">&lt;br</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"clear"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p>Note that you generally don't wrap a floating image in a <code>&lt;figure&gt;</code> element.</p><h4 id="floating-within-a-subsection">Floating within a subsection<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/docs-style-guide#floating-within-a-subsection"><i class="material-icons">link</i></a></h4><p>If you have a floating image inside an alert, callout, or a subsection, it is a good idea to apply the <code>clear-fix</code> class to the <code>div</code> to ensure that the image doesn't overflow its container. For example:</p><div class="alert is-helpful clear-fix"><p><img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="100" class="right"></p><p>A subsection with <strong>markdown</strong> formatted text.</p></div><code-example language="html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;div class="alert is-helpful clear-fix"&gt; &lt;img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="100" class="right"&gt; A subsection with **markdown** formatted text. &lt;/div&gt;</div><aio-code><pre class="lang-html prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert is-helpful clear-fix"</span><span class="tag">&gt;</span><span class="pln">

  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"generated/images/guide/docs-style-guide/flying-hero.png"</span><span class="pln">
    </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"flying Angular hero"</span><span class="pln">
    </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"100"</span><span class="pln">
    </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">&gt;</span><span class="pln">

  A subsection with **markdown** formatted text.

</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted" style="max-height:24262px"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted" title="Angular documentation style guide"><a href="guide/docs-style-guide#angular-documentation-style-guide">Angular documentation style guide</a></li><li class="h2 ng-star-inserted" title="Scope of these guidelines"><a href="guide/docs-style-guide#scope-of-these-guidelines">Scope of these guidelines</a></li><li class="h2 ng-star-inserted" title="Doc generation and tooling"><a href="guide/docs-style-guide#doc-generation-and-tooling">Doc generation and tooling</a></li><li class="h2 ng-star-inserted" title="Guide pages"><a href="guide/docs-style-guide#guide-pages">Guide pages</a></li><li class="h2 ng-star-inserted" title="Markdown and HTML"><a href="guide/docs-style-guide#markdown-and-html">Markdown and HTML</a></li><li class="h2 ng-star-inserted" title="Title"><a href="guide/docs-style-guide#title">Title</a></li><li class="h2 ng-star-inserted" title="Sections"><a href="guide/docs-style-guide#sections">Sections</a></li><li class="h2 ng-star-inserted" title="Table of contents"><a href="guide/docs-style-guide#table-of-contents">Table of contents</a></li><li class="h2 ng-star-inserted" title="Navigation"><a href="guide/docs-style-guide#navigation">Navigation</a></li><li class="h2 ng-star-inserted" title="Code snippets"><a href="guide/docs-style-guide#code-snippets">Code snippets</a></li><li class="h3 ng-star-inserted" title="Code example"><a href="guide/docs-style-guide#code-example">Code example</a></li><li class="h3 ng-star-inserted" title="Code Tabs"><a href="guide/docs-style-guide#code-tabs">Code Tabs</a></li><li class="h2 ng-star-inserted" title="Source code markup"><a href="guide/docs-style-guide#source-code-markup">Source code markup</a></li><li class="h2 ng-star-inserted" title="Live examples"><a href="guide/docs-style-guide#live-examples">Live examples</a></li><li class="h2 ng-star-inserted" title="Anchors"><a href="guide/docs-style-guide#anchors">Anchors</a></li><li class="h2 ng-star-inserted" title="Alerts and Calllouts"><a href="guide/docs-style-guide#alerts-and-calllouts">Alerts and Calllouts</a></li><li class="h3 ng-star-inserted" title="Alerts"><a href="guide/docs-style-guide#alerts">Alerts</a></li><li class="h3 ng-star-inserted" title="Callouts"><a href="guide/docs-style-guide#callouts">Callouts</a></li><li class="h2 ng-star-inserted" title="Trees"><a href="guide/docs-style-guide#trees">Trees</a></li><li class="h2 ng-star-inserted" title="Tables"><a href="guide/docs-style-guide#tables">Tables</a></li><li class="h2 ng-star-inserted active" title="Images"><a href="guide/docs-style-guide#images">Images</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.79+sha.55f1ef01.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.ee607cf78010348c8334.js" type="module"></script><script src="runtime-es5.ee607cf78010348c8334.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.9cd62e243bd182514a19.js" type="module"></script><script src="main-es5.9cd62e243bd182514a19.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>